<template>
  <view class="shop-page">
    <view class="search">
      <u-search
          placeholder="请输入店铺关键字"
          v-model="keyword"
          height="60rpx"
          searchIconSize="50rpx"
          @search="onSearch"
          @custom="onSearch"
          @clear="onClear"
      ></u-search>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="goShop(item)">
        <view class="image" v-if="item.descImage && item.descImage[0] && item.descImage[0].image">
          <u--image
              width="150rpx"
              height="150rpx"
              lazy-load
              :fade="true"
              duration="450"
              :src="baseUrl + item.descImage[0].image.thumbnail_path"></u--image>
        </view>
        <view class="name">{{item.name}}</view>
      </view>
    </view>
    <v-tab :selected="'/pages/shop/index'" />
    <u-back-top bottom="150" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.88'}"></u-back-top>
  </view>
</template>

<script>
import Tab from '../../components/tab'
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../util/base64'
import Supplier from '../../api/supplier'
// import Item from './components/Item'

const supplierModel = new Supplier()

const displayCount = 50

export default {
  components: {
    'v-tab': Tab,
    // 'v-item': Item
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad() {
    // 分享
    /*#ifdef MP-WEIXIN*/
    // 微信小程序端执行的逻辑
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline'],
      success: res => {

      }
    })
    /*#endif*/

    uni.hideTabBar({
      animation: false,
      success: () => {

      },
      fail: () => {

      }
    })
    uni.setNavigationBarTitle({
      title: '店铺街'
    })
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    // this.load()
  },
  onShow() {
    if (this.list.length === 0) {
      this.load()
    }
  },
  onHide() {
    // 一定要处理
    // this.queryList = {
    //   page: 0,
    //   pageSize: displayCount,
    //   busy: false
    // }
    // this.list = []
    // this.total = 0
  },
  // 加载更多,分页
  onReachBottom() {
    this.getList(true)
  },
  // 刷新
  onPullDownRefresh() {
    // onshow中处理, 不需要刷新
    // this.getList()
  },
  data() {
    return {
      scrollTop: 0,
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      list: [],
      total: 0,
      queryList: {
        page: 0,
        pageSize: displayCount,
        busy: false
      },
      keyword: ''
    }
  },
  watch: {
    keyword: {
      handler(v) {
        if (v.length === 0) {
          this.load()
        }
      }
    }
  },
  methods: {
    goShop(item) {
      uni.navigateTo({
        url: `/pages/shop/shop?id=${item.id}`
      })
    },
    onClear() {
      this.load()
    },
    onSearch() {
      this.load()
    },
    // goGroup() {
    //   uni.navigateTo({
    //     url: '/sub_product/area/index?id=5'
    //   })
    // },

    // 加载
    load() {
      this.list = []
      this.total = 0
      this.queryList = {
        page: 0,
        pageSize: displayCount,
        busy: false
      }
      this.getList()
    },

    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        supplierModel.getList({
          ...this.queryList,
          keyword: this.keyword
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          this.total = data.quantity
          // console.log(this.list)
          // uni.stopPullDownRefresh();
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.shop-page {
  background: #f7f8f9;
  padding-bottom: 100px;
  .search {
    padding: 10rpx;
    background: white;
  }
  .list {
    background: white;
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx 10rpx 70px 10rpx;
    .item {
      width: calc(25% - 5rpx);
      margin-right: 5rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      border: 1rpx solid #f7f8f9;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      padding: 10rpx 0;
      border-radius: 5rpx;
      .image {
        height: 160rpx;
      }
      .name {
        font-size: 24rpx;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
      }
    }
  }
}
</style>
